<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>国内疫情可视化</title>
    <link rel="stylesheet" href="../static/css/cov.css">
</head>
<body>
<div class="wrapper">
    <div id="web_bg" style="background-image: url(../static/img/bg.jpg);"></div>
</div>

<div style="top:3%;left:19%;position: absolute;color:chocolate;">
    <img src="../static/img/title-left.png">
</div>
<div style="top:3%;left:57%;position: absolute;color:chocolate;">
    <img src="../static/img/title-right.png">
</div>
<div style="top:0%;left:39.85%;position: absolute;color:chocolate;">
    <h1>国内疫情实时监测</h1>
</div>
    <div style="position:absolute;bottom:68%;left:13%;width:60%;height:10%">
        <button class="login-button" onclick=" change_geo_to_danger_areas(this)" style="position: absolute;bottom:1%;left:35%;width:12%;"> 风险地区视图</button>
        <button class="login-button" onclick=" change_geo_to_confirm(this)" style="position: absolute;bottom:1%;left:51.5%;width:12%;">现存确诊视图</button>
        <button class="login-button" onclick=" change_geo_to_suspected(this)" style="position: absolute;bottom:0%;right:18%;width:14%;">境外输入视图</button>
    </div>

    <div style="position:absolute;bottom:85%;left:10%;width:75%">
        <div id="currentConfirm"  style="top:17%;left:41%;position: absolute;color:chocolate;"></div>
        <div id="suspectedCount" style="top:17%;left:51%;position: absolute;color:chocolate;"></div>
        <div id="seriousCount" style="top:17%;left:63%;position: absolute;color:chocolate;"></div>
        <div id="dangerAreas" style="top:17%;left:34%;position: absolute;color:chocolate;"></div>
    </div>
    <div id="mid" ></div>
    <div id="right1"></div>
    <div id="right2"></div>
    <div id="left3"></div>
	<div id="left1"></div>
    <div id="left2"></div>
    <div id="right_mid_left"></div>
    <div id="right_mid_right"></div>


    <div style="position:absolute;bottom:81%;left:10.5%;width:75%">
        <div style="top:21%;left:31%;position: absolute;color: aqua;">
                    <h3>风险地区</h3>
            </div>
            <div style="top:21%;left:40%;position: absolute;color: aqua;">
                <h3>现存确诊</h3>
            </div>
            <div style="top:21%;left:49%;position: absolute;color: aqua;">
                <h3>累计境外输入</h3>
            </div>
            <div style="top:21%;left:61%;position: absolute;color: aqua;">
                <h3>现存无症状</h3>
            </div>
    </div>

	<!--此处导入的js是echarts显示图表必需的依赖-->
	<script src="../static/js/jquery-2.1.4.min.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/echarts-liquidfill.min.js"></script>
    <!--此处导入的js是绘制地图所需的依赖-->
    <script src="../static/js/china.js"></script>
    <!--此处导入的js是主题-->
	<script src="../static/js/macarons.js"></script>
    <!--导入自己的脚本-->
    <script src="../static/js/cov.js"></script>
</body>
</html>